import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
import QtQuick.Layouts

Page {
    id: loginPage
    title: "用户登录"

    signal settingsRequested()

    background: Rectangle {
        color: "#f5f5f5"
    }

    ColumnLayout {
        anchors.centerIn: parent
        width: Math.min(parent.width * 0.8, 400)
        spacing: 20

        Label {
            text: "系统登录"
            font.pixelSize: 24
            font.bold: true
            Layout.alignment: Qt.AlignHCenter
            bottomPadding: 20
        }

        TextField {
            id: usernameField
            width: parent.width
            placeholderText: "用户名"
            leftPadding: 40
            verticalAlignment: Text.AlignVCenter
            font.pixelSize: 14

            background: Rectangle {
                implicitWidth: parent.width
                implicitHeight: 40
                color: "white"
                border.color: usernameField.activeFocus ? "#2196F3" : "#BBDEFB"
                border.width: usernameField.activeFocus ? 2 : 1
                radius: 4

                Image {
                    source: "qrc:/images/user-icon.png"
                    anchors.left: parent.left
                    anchors.leftMargin: 10
                    anchors.verticalCenter: parent.verticalCenter
                    width: 20
                    height: 20
                }
            }
        }


        TextField {
            id: passwordField
            width: parent.width
            placeholderText: "密码"
            echoMode: TextField.Password
            leftPadding: 40
            verticalAlignment: Text.AlignVCenter
            font.pixelSize: 14

            background: Rectangle {
                implicitWidth: parent.width
                implicitHeight: 40
                color: "white"
                border.color: passwordField.activeFocus ? "#2196F3" : "#BBDEFB"
                border.width: passwordField.activeFocus ? 2 : 1
                radius: 4

                Image {
                    source: "qrc:/images/lock-icon.png"
                    anchors.left: parent.left
                    anchors.leftMargin: 10
                    anchors.verticalCenter: parent.verticalCenter
                    width: 20
                    height: 20
                }
            }
        }

        RowLayout {
            Item { Layout.fillWidth: true }
            Button {
                text: "登录设置"
                flat: true
                onClicked: loginPage.settingsRequested()
            }
        }

        Button {
            text: "登录"
            Layout.fillWidth: true
            Layout.minimumHeight: 40
            enabled: usernameField.text !== "" && passwordField.text !== ""
            hoverEnabled: false

            background: Rectangle {
                color: parent.enabled ? (parent.pressed ? "#1976D2" : "#2196F3") : "#E3F2FD"
                border.color: "#BBDEFB"
                border.width: 1
                radius: 4
            }

            contentItem: Text {
                text: parent.text
                color: parent.enabled ? "white" : "#90CAF9"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                font.pixelSize: 14
            }

            onClicked: {
                console.log("尝试登录:", usernameField.text)
            }
        }
    }
}
